<template>
  <el-dialog
    v-model="dialogVisible"
    title="打开场景"
    width="500px"
    @close="handleClose"
    append-to-body
  >
    <el-table :data="sceneList" style="width: 100%" @row-click="handleRowClick" empty-text="暂无场景数据">
      <el-table-column prop="name" label="场景名称" />
      <el-table-column prop="createTime" label="创建时间" width="180">
        <template #default="scope">
          {{ formatTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="更新时间" width="180">
        <template #default="scope">
          {{ formatTime(scope.row.updateTime) }}
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'; // 导入Vue的ref和onMounted组件
import { ElMessage, ElDialog, ElTable, ElTableColumn, ElButton } from 'element-plus'; // 导入Element Plus组件
// import axios from 'axios'; // 不再直接使用axios，改用封装的API方法
import { queryCzmlFiles, exportCzmlFile } from '@/api/files'; // 导入查询CZML文件列表和导出CZML文件的API方法

// 定义props
const props = defineProps({
  // 你可以在这里定义props，如果需要的话
});

// 定义emits
const emit = defineEmits(['scene-opened']);

// 控制对话框显示状态的响应式引用
const dialogVisible = ref(false);
// 存储场景列表的响应式引用
const sceneList = ref([]);

// 获取所有CZML文件列表的方法
const fetchSceneList = async () => {
  try {
    // 显示加载中的提示信息
    const loading = ElMessage.info({
      message: '正在获取场景列表，请稍候...',
      duration: 0
    });
    
    try {
      // 发起GET请求获取CZML文件列表
      const response = await queryCzmlFiles(); 
      loading.close(); // 关闭加载提示
      
      // 检查响应状态码，code=0表示成功，code=1表示失败
      if (response && response.code === 0) { 
        // 如果请求成功，将文件列表转换为场景列表格式
        sceneList.value = response.data.map(file => ({
          fileId: file.fileId,
          name: file.fileName.replace(/\.czml$/, ''), // 移除.czml后缀作为场景名称
          fileName: file.fileName,
          createTime: new Date().toISOString(), // 由于API没有返回创建时间，使用当前时间
          updateTime: new Date().toISOString() // 由于API没有返回更新时间，使用当前时间
        }));
        console.log('获取场景列表成功:', sceneList.value);
      } else {
        // 如果请求失败，显示错误消息
        ElMessage.error(response.msg || '获取场景列表失败');
      }
    } catch (innerError) {
      loading.close();
      throw innerError; // 抛出内部错误供外层捕获
    }
  } catch (error) {
    // 如果发生错误，打印错误信息并显示错误消息
    console.error('获取场景列表失败:', error);
    ElMessage.error('获取场景列表失败: ' + (error.message || '请稍后重试'));
  }
};

// 组件挂载后获取场景列表
onMounted(() => {
  // fetchSceneList(); // 初始加载时可以不获取，由父组件控制显示时再获取
});

// 显示对话框并初始化数据的方法
const show = () => {
  dialogVisible.value = true;
  fetchSceneList(); // 显示对话框时获取最新的场景列表
};

// 处理对话框关闭事件
const handleClose = () => {
  dialogVisible.value = false;
};

// 处理行点击事件，打开选中的场景
const handleRowClick = async (row) => {
  try {
    // 显示加载中的提示信息
    const loading = ElMessage.info({
      message: '正在加载场景，请稍候...',
      duration: 0
    });
    
    try {
      // 调用导出CZML文件的API获取文件URL
      const response = await exportCzmlFile(row.fileId, row.name);
      
      // 检查响应状态码，code=0表示成功，code=1表示失败
      if (response && response.code === 0 && response.data) {
        // 获取到文件URL后，使用fetch获取文件内容
        let fileUrl = response.data;
        console.log('获取到CZML文件URL:', fileUrl);
        
        // 检查URL是否是阿里云OSS地址，如果是则通过代理访问
        if (fileUrl.includes('aliyuncs.com')) {
          // 将阿里云OSS的URL转换为使用本地代理的URL
          const ossUrl = new URL(fileUrl);
          fileUrl = `/oss-proxy${ossUrl.pathname}${ossUrl.search}`;
          console.log('使用OSS代理访问:', fileUrl);
        }
        
        const fileResponse = await fetch(fileUrl);
        if (!fileResponse.ok) {
          throw new Error(`获取文件内容失败: ${fileResponse.status} ${fileResponse.statusText}`);
        }
        
        // 解析CZML文件内容
        const czmlData = await fileResponse.json();
        console.log('解析CZML文件内容:', czmlData);
        
        // 清空localStorage中的所有场景相关数据
        localStorage.removeItem('currentScene');
        localStorage.removeItem('sceneId');
        localStorage.removeItem('satellites');
        localStorage.removeItem('groundStations');
        localStorage.removeItem('areaTargets');
        localStorage.removeItem('pointTargets');
        localStorage.removeItem('payloads');
        
        // 将场景基本信息存储到localStorage
        const sceneInfo = {
          fileId: row.fileId,
          name: row.name,
          fileName: row.fileName,
          createTime: row.createTime || new Date().toISOString(),
          updateTime: row.updateTime || new Date().toISOString()
        };
        
        // 解析CZML数据并存储到localStorage
        if (Array.isArray(czmlData) && czmlData.length > 0) {
          console.log('开始解析CZML数据，总对象数:', czmlData.length);
          
          // 查找并存储初始视角数据 - 优先使用customType字段识别
          const viewpointData = czmlData.find(item => 
            item.customType === 'initialViewpoint' || item.id === 'initialViewpoint'
          );
          
          if (viewpointData) {
            console.log('找到初始视角数据');
            // 如果存在formData，使用它作为完整数据
            if (viewpointData.properties && viewpointData.properties.formData) {
              sceneInfo.initialViewpoint = viewpointData.properties.formData;
              console.log('使用formData作为初始视角数据');
            } else {
              sceneInfo.initialViewpoint = viewpointData;
            }
          }
          
          // 提取并存储卫星数据 - 优先使用customType字段识别
          const satellites = czmlData.filter(item => 
            item.customType === 'satellite' || (item.id && item.id.startsWith('satellite_'))
          );
          
          if (satellites.length > 0) {
            console.log('找到卫星数据，数量:', satellites.length);
            // 处理formData
            const processedSatellites = satellites.map(satellite => {
              // 如果存在formData，使用它作为完整数据
              if (satellite.properties && satellite.properties.formData) {
                return satellite.properties.formData;
              }
              return satellite;
            });
            localStorage.setItem('satellites', JSON.stringify(processedSatellites));
          }
          
          // 提取并存储地面站数据 - 优先使用customType字段识别
          const groundStations = czmlData.filter(item => 
            item.customType === 'groundStation' || (item.id && item.id.startsWith('groundStation_'))
          );
          
          if (groundStations.length > 0) {
            console.log('找到地面站数据，数量:', groundStations.length);
            // 处理formData
            const processedStations = groundStations.map(station => {
              // 如果存在formData，使用它作为完整数据
              if (station.properties && station.properties.formData) {
                return station.properties.formData;
              }
              return station;
            });
            localStorage.setItem('groundStations', JSON.stringify(processedStations));
          }
          
          // 提取并存储区域目标数据 - 优先使用customType字段识别
          const areaTargets = czmlData.filter(item => 
            item.customType === 'areaTarget' || (item.id && item.id.startsWith('areaTarget_'))
          );
          
          if (areaTargets.length > 0) {
            console.log('找到区域目标数据，数量:', areaTargets.length);
            // 处理formData
            const processedTargets = areaTargets.map(target => {
              // 如果存在formData，使用它作为完整数据
              if (target.properties && target.properties.formData) {
                return target.properties.formData;
              }
              return target;
            });
            localStorage.setItem('areaTargets', JSON.stringify(processedTargets));
          }
          
          // 提取并存储点目标数据 - 优先使用customType字段识别
          const pointTargets = czmlData.filter(item => 
            item.customType === 'pointTarget' || (item.id && item.id.startsWith('pointTarget_'))
          );
          
          if (pointTargets.length > 0) {
            console.log('找到点目标数据，数量:', pointTargets.length);
            // 处理formData
            const processedTargets = pointTargets.map(target => {
              // 如果存在formData，使用它作为完整数据
              if (target.properties && target.properties.formData) {
                return target.properties.formData;
              }
              return target;
            });
            localStorage.setItem('pointTargets', JSON.stringify(processedTargets));
          }
          
          // 提取并存储载荷数据 - 优先使用customType字段识别
          const payloads = czmlData.filter(item => 
            item.customType === 'payload' || (item.id && item.id.startsWith('payload_'))
          );
          
          if (payloads.length > 0) {
            console.log('找到载荷数据，数量:', payloads.length);
            // 处理formData
            const processedPayloads = payloads.map(payload => {
              // 如果存在formData，使用它作为完整数据
              if (payload.properties && payload.properties.formData) {
                return payload.properties.formData;
              }
              return payload;
            });
            localStorage.setItem('payloads', JSON.stringify(processedPayloads));
          }
        }
        
        // 保存场景信息
        localStorage.setItem('currentScene', JSON.stringify(sceneInfo));
        
        // 单独存储sceneId，以便在保存场景时可以更可靠地获取
        localStorage.setItem('sceneId', row.fileId.toString());
        console.log('场景ID已保存到localStorage:', row.fileId);
        
        // 发出事件通知父组件场景已打开，并传递场景信息
        emit('scene-opened', sceneInfo);
        
        // 关闭对话框
        dialogVisible.value = false;
        
        // 显示成功消息
        ElMessage.success('场景加载成功');
        
        // 刷新页面以加载新场景
        window.location.reload();
      } else {
        throw new Error(response?.msg || '获取场景文件失败');
      }
    } catch (innerError) {
      loading.close();
      throw innerError; // 抛出内部错误供外层捕获
    }
  } catch (error) {
    console.error('打开场景失败:', error);
    ElMessage.error('打开场景失败: ' + (error.message || '请稍后重试'));
  }
};

// 格式化时间戳
const formatTime = (timeStr) => {
  if (!timeStr) return '';
  const date = new Date(timeStr);
  return date.toLocaleString(); // 根据需要调整时间格式
};

// 暴露方法给父组件调用
defineExpose({
  show,
});
</script>

<style scoped lang="scss">
/* 你可以在这里添加组件的特定样式 */
.el-table {
  cursor: pointer; /* 鼠标悬停在表格行上时显示指针 */
}
</style>